<template>
  <div class="template-box">
    <heardTab
      :background="background"
      :position="position"
      @pathChild="pathChild"
      :flag="flag"
      @changeFlag="changeFlag"
    />
    <div class="conetent" :style="{ background: store.styleInfo.background }" id="template1Box">
      <router-view></router-view>
    </div>
    <templateFooter :background="store.styleInfo.themeColor" v-model="cruuent" @setCruuent="setCruuent" />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { useRouter, useRoute } from 'vue-router';
import heardTab from '../heardTemponents/heardTab.vue';
import templateFooter from '../footer/footer.vue';
import { ref, computed, watch, onMounted } from 'vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const cruuent = ref(0);
const flag = ref(false);
const background = ref('rgba(0, 0, 0, 0.4)'); //#CFBDA8"
const position = ref('absolute'); //relative
const color = ref('#ffffff');
if (route.meta.position == 'absolute') {
  background.value = 'rgba(0, 0, 0, 0.4)';
  position.value = 'absolute';
} else {
  background.value = store.styleInfo.themeColor;
  position.value = 'relative';
}
watch(
  () => route,
  () => {
    // console.log('变化');
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
  },
  { deep: true },
);
watch(
  store.styleInfo,
  () => {
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
  },
  { deep: true },
);
const setCruuent = (e: number) => {
  switch (e) {
    case 0:
      router.push({
        path: route.meta.loopType ? pathListLoop[0] : pathList[0],
        query: {},
      });
      break;
    case 1:
      router.push({
        path: route.meta.loopType ? pathListLoop[1] : pathList[1],
        query: {},
      });
      break;
    case 2:
      router.push({
        path: route.meta.loopType ? pathListLoop[5] : pathList[5],
        query: {},
      });
      break;
    case 3:
      router.push({
        path: route.meta.loopType ? pathListLoop[6] : pathList[6],
        query: {},
      });
      break;
    case 4:
      router.push({
        path: route.meta.loopType ? pathListLoop[3] : pathList[3],
        query: {},
      });
      break;
    default:
      router.push({
        path: route.meta.loopType ? pathListLoop[7] : pathList[7],
        query: {},
      });
      break;
  }
};
const pathChild = (e) => {
  // if (e !== 0) {
  //   background.value = store.styleInfo.themeColor;
  //   position.value = 'relative';
  // } else {
  //   background.value = 'rgba(0, 0, 0, 0.4)';
  //   position.value = 'absolute';
  // }
};
onMounted(() => {
  // 获取目标元素
  const myDiv = document.getElementById('template1Box');
  // console.log(myDiv);

  // 监听滚轮事件
  myDiv.addEventListener('wheel', handleScroll);

  // 滚轮事件处理程序
  function handleScroll(event) {
    // 判断滚轮滚动方向
    const delta = Math.sign(event.deltaY);
    // 如果向下滚动，执行相应逻辑
    if (delta > 0 && !flag.value) {
      // 执行滚轮向下滑动时的操作
      // console.log('滚轮向下滑动！');
      flag.value = true;
      console.log(flag.value);
    }
  }
});
const changeFlag = () => {
  flag.value = false;
};
</script>

<style lang="less" scoped>
.template-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.conetent {
}
</style>
